<template>
	<view class="container">
		<view class="list-cell b-b avatar" hover-class="cell-hover" :hover-stay-time="50"  @click="clk(0)">
			<text class="cell-tit">头像</text>
			<image :src="urls" mode="widthFix"></image>
			<text class="cell-more yticon icon-you"></text>
		</view>
		<view class="list-cell" hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">姓名</text>
			<input type="text" value="" style="text-align: right; color: #666;font-size: 28upx;" placeholder="请输入你真实姓名" />
			<text class="cell-more yticon icon-you"></text>
		</view>
		
		<view class="list-cell m-t b-b" @tap="sex"  hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">性别</text>
			<text class="cell-tip">{{sexType}}</text>
			<text class="cell-more yticon icon-you"></text>
		</view>
		<view class="list-cell b-b"  hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">年龄</text>
			<picker  class="cell-tip"  @change="bindAgeChange" :value="ageid" :range="array" range-key="name">
				<view class="uni-input agess">{{array[ageid].name}}</view>
			</picker>
			<text class="cell-more yticon icon-you"></text>
		</view>
		<view class="list-cell" >
			<text class="cell-tit">手机号</text>
			<input type="text" value="" style="text-align: right; color: #666;font-size: 28upx;" placeholder="请输入你手机号" />
			<text class="cell-more yticon icon-you"></text>
		</view>
		<view class="list-cell m-t b-b">
			<text class="cell-tit">职称</text>
			<picker  class="cell-tip"  @change="bindHeightChange" :value="Heightid" :range="height" range-key="name">
				<view class="uni-input agess">{{height[Heightid].name}}</view>
			</picker>
			<text class="cell-more yticon icon-you"></text>
		</view>
		<view class="list-cell b-b" >
			<text class="cell-tit">就职单位</text>
			<input type="text" value="" style="text-align: right; color: #666;font-size: 28upx;" placeholder="请输入就职单位" />
			<text class="cell-more yticon icon-you"></text>
		</view>
		<button class="onname" type="primary" @tap="onOKname()">注册</button>
		<avatar @upload="doUpload" @avtinit="doBefore" quality="0.8" ref="avatar"></avatar>
	</view>
</template>

<script>
	import avatar from "../../../../../components/yq-avatar/yq-avatar.vue";
	let sex = ['男', '女'];
	import { mapMutations} from 'vuex';
	export default {
		data() {
			return {
				urls: 'https://www.kkwei.top/yzy/ysimg/ystx07.jpg',
				sexsi:1,
				array: [],
				ageid: 30,
				height:[{
					
					name:'请选择职称',
				},
				{
					name:'主任医师',
				},
				{
					name:'副主任医师',
				},
				{
					name:'主治医师',
				},
				{
					name:'住院医师',
				},
				{
					name:'助理医师',
				}],
				Heightid:0,
				weight:[],
				weightid:10,
			};
		},
		computed: {
			sexType() {
				return sex[this.sexsi];
			}
		},
		onLoad(){
			let i;
			for (i = 18; i < 121; i++) {
			   	this.array.push({name:i});
			};
		},
		methods:{
			...mapMutations(['logout']),
			//跳转
			navsTo(url){
				uni.navigateTo({
					url:url
				})
			},
			//退出登录
			toLogout(){
				uni.showModal({
				    content: '确定要退出登录么',
				    success: (e)=>{
				    	if(e.confirm){
				    		this.logout();
				    		setTimeout(()=>{
				    			uni.navigateBack();
				    		}, 200)
				    	}
				    }
				});
			},
			//选择性别
			sex() {
				uni.showActionSheet({
					itemList:sex,
					success: (res)=> {
						this.sexsi = res.tapIndex
					}
				});
			},
			//选择年龄
			bindAgeChange(e) {
				//console.log('picker发送选择改变，携带值为：' + e.target.value)
				this.ageid = e.target.value
			},
			//选择职称
			bindHeightChange(e) {
				this.Heightid = e.target.value
				console.log(e.target.value)
				
			},
			doBefore() {
				console.log('doBefore');
			},
			clk(index) {
				this.$refs.avatar.fChooseImg(index,{
					selWidth: '350upx', selHeight: '350upx', 
					expWidth: '260upx', expHeight: '260upx',
					inner: index ? 'true' : 'false'
				});
			},
			doUpload(rsp) {
				 console.log(rsp);
				 //this.urls=rsp.path;
				// this.$set(this.urls, rsp.index, rsp.path);
				uni.uploadFile({
					url: 'http://192.168.10.175:8899/index/ajax/upload', //仅为示例，非真实的接口地址
					filePath: rsp.path,
					name: "file",
					dataType:"json",
					formData: {
						'token': 'f2e47c4c-ac3f-46fc-a6ab-173e2c301772'
					},
					success: (uploadFileRes) => {
						var dataarr=JSON.parse(uploadFileRes.data);
						console.log(dataarr.code);
						if(dataarr.code==1){
							uni.showToast({
								title:dataarr.msg
							})
							this.urls='http://192.168.10.175:8899'+dataarr.data.url;
						}else{
							uni.showToast({
								title:dataarr.msg
							})
						}
						
					},
					complete(res) {
						//console.log(res)
					}
				});
			}
		},
		components: {
			avatar
		}
	}
</script>

<style lang='scss'>
	page{
		background: $page-color-base;
	}
	.avatar{
		padding-top: 40upx!important;
		padding-bottom: 40upx!important;
	}
	.agess{
		position: absolute;
		z-index: 2;
		top: 0px;
		right: 0px;
		height: 100%;
		line-height: 38px;
		padding-left: 200px;
		padding-right: 36px!important;
		background: transparent;
	}
	.avatar .cell-tit{
		font-weight: bold!important;
	}
	.onname{
		width: 94%;
		margin: 20px auto;
		background: #f17503;
		background: -webkit-linear-gradient(left, #f49315 , #f17503);
		background: -o-linear-gradient(right, #f49315, #f17503);
		background: -moz-linear-gradient(right, #f49315, #f17503);
		background: -webkit-gradient(linear, left top, right top, from(#f49315) , to(#f17503));
		background: -o-linear-gradient(left, #f49315 , #f17503);
		background: linear-gradient(to right, #f49315 , #f17503);
	}
	.avatar image{
		position: absolute;
		top: 50%;
		right: 36px;
		width: 88upx;
		height: 88upx;
		border-radius: 50%;
		margin-top: -44upx;
		z-index: 1
	}
	.list-cell{
		display:flex;
		align-items:baseline;
		padding: 20upx $page-row-spacing;
		line-height:60upx;
		position:relative;
		background: #fff;
		justify-content: center;
		&.log-out-btn{
			margin-top: 40upx;
			.cell-tit{
				color: $uni-color-primary;
				text-align: center;
				margin-right: 0;
			}
		}
		&.cell-hover{
			background:#fafafa;
		}
		&.b-b:after{
			left: 30upx;
		}
		&.m-t{
			margin-top: 16upx; 
		}
		.cell-more{
			align-self: baseline;
			font-size:$font-lg;
			color:$font-color-light;
			margin-left:10upx;
		}
		.cell-tit{
			flex: 1;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			margin-right:10upx;
		}
		.cell-tip{
			font-size: $font-base;
			color: $font-color-light;
		}
		switch{
			transform: translateX(16upx) scale(.84);
		}
	}
</style>
